import React, { Component } from "react";
import {
  Map,
  Marker,
  NavigationControl,
  MapvglView,
  MapvglLayer,
} from "react-bmapgl";
import url from "@/config/url";
import axios from "@/http/http";
class Index extends Component {
  state = {
    point: [],
  };
  render() {
    return (
      <Map
        center={{ lng: 116.402544, lat: 39.928216 }}
        enableScrollWheelZoom
        zoom="10"
      >
        <Marker position={{ lng: 116.402544, lat: 39.928216 }} />
        <NavigationControl />
        {/* <InfoWindow position={{ lng: 116.402544, lat: 39.928216 }} text="千锋北科校区" title="软件人才基地" /> */}
        <MapvglView effects={["bright"]}>
          <MapvglLayer
            type="PointLayer"
            data={this.state.point}
            options={{
              blend: "lighter",
              size: 12,
              color: "rgb(255, 53, 0, 0.6)",
            }}
          />
        </MapvglView>
      </Map>
    );
  }
  componentDidMount() {
    // 发起数据请求
    axios.get(url.getcinemalocation).then((res) => {
      //
      var data = [
        {
          geometry: {
            type: "Point",
            coordinates: [116.403748, 39.915055],
          },
        },
      ];
      console.log(res);
      if (res.data.errNo == 0) {
        //
        res.data.paginate.slice(0, 50).map((item) => {
          data.push({
            geometry: {
              type: "Point",
              coordinates: [
                item.gpsaddress.split(",")[0],
                item.gpsaddress.split(",")[1],
              ],
            },
          });
        });

        this.setState({
          point: data,
        });
      }
    });
  }
}

export default Index;
